<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>指标预警</title>
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="screen-orientation" content="portrait"/>
        <link rel="stylesheet" href="/Resources/css/mui.css">
        <link rel="stylesheet" href="/Resources/css/public.css">
        <link rel="stylesheet" href="/Resources/css/earlyWarn.css">

    </head>

    <body>
        <div class="earlyWarn" id="app">
            <ul class="earlyWarn-list-wrap">
                <li class="earlyWarn-list">
                    <div class="earlyWarn-list-topic mui-table-view-cell">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn delete">删除</a>
                        </div>
                        <div class="mui-slider-handle">
                            <span class="radius"></span>
                            <span class="title">
                                冷镀金
                            </span>
                            <span class="unit">
                                ￥
                            </span>
                            <span class="num">
                                77.00
                            </span>
                            <span class="trend down">
                                -8.00
                            </span>
                            <i class="mui-icon mui-icon-arrowright"></i>
                            <i class="icon icon-down"></i>
                        </div>
                    </div>
                    <div class="earlyWarn-list-chart">
                        <div class="chart chart-table">
                            <div class="chart-title">
                                <span class="radius"></span>
                                <div class="text">
                                    <i class="icon icon-chart"></i>
                                    曲线图
                                </div>
                            </div>
                            <table>
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>热卷主力</th>
                                        <th>螺纹主力</th>
                                        <th>卷螺差</th>
                                        <th>涨跌</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>7-31</td>
                                        <td>4177</td>
                                        <td>4199</td>
                                        <td>77</td>
                                        <td class="down">-8.00</td>
                                    </tr>
                                    <tr>
                                        <td>7-31</td>
                                        <td>4177</td>
                                        <td>4199</td>
                                        <td>77</td>
                                        <td class="level">0.00</td>
                                    </tr>
                                    <tr>
                                        <td>7-31</td>
                                        <td>4177</td>
                                        <td>4199</td>
                                        <td>77</td>
                                        <td class="up">-8.00</td>
                                    </tr>
                                </tbody>

                            </table>
                        </div>
                        <div class="chart chart-bar" style="display: none">
                            <div class="chart-title">
                                <span class="radius"></span>
                                <div class="text">
                                    <i class="icon icon-table"></i>
                                    曲线图
                                </div>
                            </div>
                            <div class="plot">
                                <img src="/Resources/images/plot.png" alt="">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="earlyWarn-list">
                    <div class="earlyWarn-list-topic mui-table-view-cell">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn delete">删除</a>
                        </div>
                        <div class="mui-slider-handle">
                            <span class="radius"></span>
                            <span class="title">
                                冷镀金
                            </span>
                            <span class="unit">
                                ￥
                            </span>
                            <span class="num">
                                77.00
                            </span>
                            <span class="trend">
                                0.00
                            </span>
                            <i class="mui-icon mui-icon-arrowright"></i>
                        </div>
                    </div>
                    <div class="earlyWarn-list-chart">
                        <div class="chart chart-table">
                            <div class="chart-title">
                                <span class="radius"></span>
                                <div class="text">
                                    <i class="icon icon-chart"></i>
                                    曲线图
                                </div>
                            </div>
                            <table>
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>热卷主力</th>
                                        <th>螺纹主力</th>
                                        <th>卷螺差</th>
                                        <th>涨跌</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>7-31</td>
                                        <td>4177</td>
                                        <td>4199</td>
                                        <td>77</td>
                                        <td class="down">-8.00</td>
                                    </tr>
                                    <tr>
                                        <td>7-31</td>
                                        <td>4177</td>
                                        <td>4199</td>
                                        <td>77</td>
                                        <td class="level">0.00</td>
                                    </tr>
                                    <tr>
                                        <td>7-31</td>
                                        <td>4177</td>
                                        <td>4199</td>
                                        <td>77</td>
                                        <td class="up">-8.00</td>
                                    </tr>
                                </tbody>

                            </table>
                        </div>
                        <div class="chart chart-bar" style="display: none">
                            <div class="chart-title">
                                <span class="radius"></span>
                                <div class="text">
                                    <i class="icon icon-table"></i>
                                    曲线图
                                </div>
                            </div>
                            <div class="plot">
                                <img src="/Resources/images/plot.png" alt="">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="earlyWarn-list">
                    <div class="earlyWarn-list-topic mui-table-view-cell">
                        <div class="mui-slider-right mui-disabled">
                            <a class="mui-btn delete">删除</a>
                        </div>
                        <div class="mui-slider-handle">
                            <span class="radius"></span>
                            <span class="title">
                                冷镀金
                            </span>
                            <span class="unit">
                                ￥
                            </span>
                            <span class="num">
                                77.00
                            </span>
                            <span class="trend up">
                                +8.00
                            </span>
                            <i class="mui-icon mui-icon-arrowright"></i>
                            <i class="icon icon-up"></i>
                        </div>
                    </div>
                    <div class="earlyWarn-list-chart">
                            <div class="chart chart-table">
                                <div class="chart-title">
                                    <span class="radius"></span>
                                    <div class="text">
                                        <i class="icon icon-chart"></i>
                                        曲线图
                                    </div>
                                </div>
                                <table>
                                    <thead>
                                        <tr>
                                            <th>日期</th>
                                            <th>热卷主力</th>
                                            <th>螺纹主力</th>
                                            <th>卷螺差</th>
                                            <th>涨跌</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>7-31</td>
                                            <td>4177</td>
                                            <td>4199</td>
                                            <td>77</td>
                                            <td class="down">-8.00</td>
                                        </tr>
                                        <tr>
                                            <td>7-31</td>
                                            <td>4177</td>
                                            <td>4199</td>
                                            <td>77</td>
                                            <td class="level">0.00</td>
                                        </tr>
                                        <tr>
                                            <td>7-31</td>
                                            <td>4177</td>
                                            <td>4199</td>
                                            <td>77</td>
                                            <td class="up">-8.00</td>
                                        </tr>
                                    </tbody>
    
                                </table>
                            </div>
                            <div class="chart chart-bar" style="display: none">
                                <div class="chart-title">
                                    <span class="radius"></span>
                                    <div class="text">
                                        <i class="icon icon-table"></i>
                                        曲线图
                                    </div>
                                </div>
                                <div class="plot">
                                    <img src="/Resources/images/plot.png" alt="">
                                </div>
                            </div>
                        </div>
                </li>
            </ul>
            <div class="btn-wrap">
                <button class="define btn-blue">
                    <i class="mui-icon mui-icon-plusempty"></i>
                    自定义
                </button>
            </div>
        </div>

        <script src="/Resources/js/zepto.js"></script>
        <script src="/Resources/js/zepto.animate.basic.js"></script>
        <script src="/Resources/js/zepto.animate.js"></script>
        <script src="/Resources/js/mui.min.js"></script>
        <script src="/Resources/js/earlyWarn.js"></script>

        <script>
            var ow = document.documentElement.clientWidth;
            var oh = document.documentElement.clientHeight;
            var size = 100 * ow / 375
            var aim = document.getElementById('app')
            var tableHeight = oh - size * 1.06
            Zepto('.chart-table')
                .eq(0)
                .css('minHeight', tableHeight)
            // Zepto('.chart-bar')
            //     .eq(0)
            //     .css('minHeight', tableHeight)

            // if(oh<450){     // 修复华为虚拟导航导致可视区域过小，底部电话遮挡问题     oh=480 } aim.style.height =
            // oh + 'px'
            if (ow > 540) {
                ow = 540
            }
            window.document.documentElement.style.fontSize = size + "px";
        </script>

    </body>

</html>